<template>
	<div class="toolBar">
		<div class="searchBox">
			<!-- <v-TbSearchIp @searchVal='getTbSearchIP'>
			</v-TbSearchIp> -->
			<div class="nameBox">
				<div>IP:</div>
				<el-input v-model="searchVal" placeholder="请输入IP"></el-input>
			</div>
			<div class="nameBox">
				<div style="width: 100px;">系统名称:</div>
				<el-input v-model="systemName" placeholder="请输入系统名称"></el-input>
			</div>
			<el-button icon="el-icon-search" type="primary" @click="searchClick" style="margin-left: 15px;">
				搜索
			</el-button>
		</div>
		<div class="refresh">
			<v-Refresh></v-Refresh>
		</div>
		<div class="tableTool">
			<v-TbFilterColumn :tableColumns="tableColumns" @tbChangeLie="getTbFilterColumn">
			</v-TbFilterColumn>
		</div>


		<!-- <div class="dateBox">
            <v-TbDatePicker></v-TbDatePicker>
        </div> -->
	</div>
</template>

<script>
	import bus from 'common/bus.js';
	import vTbSearchIp from '../toolbar/TbSearchIp.vue';
	import vTbFilterColumn from '../toolbar/TbFilterColumn.vue';
	import vTbDatePicker from '../toolbar/TbDatePicker.vue'
	import vRefresh from 'common/refresh.vue'
// import search from 'core-js/library/fn/symbol/search';

	export default {
		name: 'toolBar',
		props: ['tableColumns'],
		components: {
			vTbSearchIp,
			vTbFilterColumn,
			vTbDatePicker,
			vRefresh
		},
		data() {
			return {
				searchVal: '',
				changeLie: '',
				systemName:'',
				system:'',
				searchList:[]
			};
		},
		created() {

		},
		computed: {

		},
		methods: {
			searchClick() {
				this.searchList = []
				if(this.searchVal != '' && this.systemName != ''){
					this.searchList = {
						ip:this.searchVal,
						systemname:this.systemName
					}
				}else if(this.searchVal != '' && this.systemName == ''){
					this.searchList = {
						ip:this.searchVal,
					}
				}else if(this.searchVal == '' && this.systemName != ''){
					this.searchList = {
						systemname:this.systemName,
					}
				}else{
					this.searchList = []
				}
				
				// this.searchList.push(this.searchVal)
				// this.searchList.push(this.system)
				// this.searchList.push(this.systemName)
				console.log('参数',this.searchList)
				this.$emit('getSearchIP', this.searchList);
				
			},
			resetClick() {
				this.searchVal = '';
				this.$emit('getSearchIP', this.searchVal);
			},
			getTbSearchIP(val) {
				this.searchVal = val;
			},
			getTbFilterColumn(val) {
				this.changeLie = val;
				this.$emit('changeLie', this.changeLie);
			},
		},
		watch: {

		}
	}
</script>

<style scoped>
	.toolBar {
		overflow: hidden;
		margin-bottom: 14px;

	}
	
	.nameBox{
		margin-left: 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.searchBox {
		float: left;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 20px;
	}

	.tableTool {
		float: right;
	}

	.dateBox {
		float: left;
	}

	.refresh {
		float: left;
		width: 300px
	}
</style>
